<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            list-style: none;
        }

        a {
            color: white;
        }

        #card {

            margin: 0 auto;
            margin-top: 100px;
            width: 300px;
            height: 200px;

        }

        #title {
            width: 100%;
            height: 25px;
        }

        #title h3 {
            font-size: 14px;
            background: #888;
            border: 2px solid white;
            width: 80px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            float: left;
        }

        #title .cur {
            background: #ccc;
            border: 2px solid #ccc;
        }

        #content {
            background: #ccc;
            width: 100%;
            height: 175px;
        }

        #content ul {
            margin-left: 5px;
            display: none;
        }

        #content .active {
            display: block;
        }
    </style>
</head>
<body>
<div id="card">
    <div id="title">
        <h3 class="cur"><a href="show.php?cid=1">第一项</a></h3>
        <h3><a href="show.php?cid=2">第二项</a></h3>
        <h3><a href="show.php?cid=3">第三项</a></h3>
    </div>

    <div id="content">
        <ul class="active">
            <li>1111111111111111111111111111</li>
            <li>1111111111111111111111111111</li>
            <li>1111111111111111111111111111</li>
            <li>1111111111111111111111111111</li>
            <li>1111111111111111111111111111</li>
            <li>1111111111111111111111111111</li>
            <li>1111111111111111111111111111</li>

        </ul>
        <ul>
            <li>2222222222222222222222222222</li>
            <li>2222222222222222222222222222</li>
            <li>2222222222222222222222222222</li>
            <li>2222222222222222222222222222</li>
            <li>2222222222222222222222222222</li>
            <li>2222222222222222222222222222</li>
            <li>2222222222222222222222222222</li>

        </ul>
        <ul>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>
            <li>33333333333333333333333333333</li>

        </ul>
    </div>
</div>
<script>
    var hs = document.getElementById("title").getElementsByTagName("h3");
    var uls = document.getElementById("content").getElementsByTagName("ul");
    var time=null;
	var lis=document.getElementsByTagName('li');
	lis.attachEvent('onclick',function(){
		alert(1);
	});
    // for (let i = 0; i < hs.length; i++) {
    //     hs[i].onmouseover = function () {
    //         time = setInterval(function () {
    //             active(i);
    //         }, 300)
    //     }
    //     hs[i].onmouseout=function () {
    //         clearInterval(time)
    //     }
    // }

    // function active(index) {
    //     for (let i = 0; i < hs.length; i++) {
    //         if (i == index) {
    //             uls[index].className = "active";
    //             hs[index].className = "cur";
    //         } else {
    //             hs[i].className = "";
    //             uls[i].className = "";
    //         }
    //     }
    // }
</script>
</body>
</html>